<template>
	<view class="page">
		<view class="nav_bar" :style="`background: url(${$util.prefix('auth/store_auth_nav_bg.png')}) 0 0 no-repeat;`">
			<uni-nav-bar color="#333" left-icon="left" title="创建圈子" :border='false' :fixed="true"
				background-color="transparent" @clickLeft="$native.backAction()"></uni-nav-bar>
		</view>
		
		<view class="notice flex_center">
			<u-icon name="info-circle-fill" size="26rpx" color="#FD2A53"></u-icon>
			<text>您可在完成个人认证或企业认证后创建圈子</text>
		</view>

		<view class="content">
			<view class="list flex_center" :id="type == 4 ? 'select' : ''" @click="onType(4)">
				<view class="left flex_center">
					<view class="icon">
						<image :src="$util.prefix('auth/store_auth_geren.png')"></image>
					</view>
					<view class="text">
						<text>个人身份</text>
						<view>需要实名认证身份认证</view>
					</view>
				</view>
				<view class="right">
					<view class="block flex_center" v-if="auth_info.auth_status && auth_info.auth_status == 2">
						<u-icon name="checkmark-circle-fill" color="#1FC129" size="28rpx"></u-icon>
						<text>已认证</text>
					</view>
					<view class="block flex_center" v-else  @click.stop="$util.toUrl('/pages/auth/authcenter')">
						<view>去认证</view>
					</view>
				</view>
			</view>

			<view class="list flex_center" :id="type == 1 ? 'select' : ''" @click="onType(1)">
				<view class="left flex_center">
					<view class="icon">
						<image :src="$util.prefix('auth/store_auth_qiye.png')"></image>
					</view>
					<view class="text">
						<text>企业</text>
						<view>法人实名认证及营业执照</view>
					</view>
				</view>
				<view class="right">
					<view class="block flex_center" v-if="companyAuth.company_status == 2">
						<u-icon name="checkmark-circle-fill" color="#1FC129" size="28rpx"></u-icon>
						<text>已认证</text>
					</view>
					<view class="block flex_center" v-else @click.stop="$util.toUrl('/pages/auth/authcenter')">
						<view>去认证</view>
					</view>
				</view>

			</view>
		</view>

		<view class="btn flex_r_around" @click="toAuth">
			<text>下一步</text>
		</view>
		
		<u-popup :show="show" mode="center" @close="show = false" bgColor="transparent">
			<view class="modal">
				<view class="text">{{ show_type == 1 ? '请先完成企业认证' : '请先完成实名认证' }}</view>
				<view class="modal_btn flex_r_between">
					<view class="item cancel flex_r_around" @click="show = false">
						<text>取消</text>
					</view>
					<view class="item submit flex_r_around" @click="$util.toUrl('/pages/auth/authcenter')">
						<text>去完成</text>
					</view>
				</view>
		
				<view class="icon">
					<u-icon name="error-circle-fill" color="#FD2A53" size="112rpx"></u-icon>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	export default {
		
		data() {
			return {
				// type:1=企业，4=个人
				type: 0,

				auth_info: {},

				companyAuth: {
					company_status: 1,
					company_legal_name: '',
					company_legal_id_num: '',
					company_file_yyzz: '',
					create_circle_file: '',
				},
				
				show: false,
				
				
				show_type: 0,
			}
		},
		
		methods: {
			onType(type) {

				if (type == 1) {
					if (this.companyAuth.company_status == 2) {
						this.type = type;
					} else {
						this.show_type = type;
						this.show = true;
					}
				}

				if (type == 4) {
					if (this.auth_info.auth_status == 2) {
						this.type = type;
					} else {
						this.show_type = type;
						this.show = true;
					}
				}

			},

			getStatus() {
				this.$post('/user/getProviderInfo').then(res => {
					this.auth_info = res.data || {};
				});
			},

			getCompanyAuth() {
				this.$post('/circle.circle/getCompanyAuth').then(res => {
					this.companyAuth = res.data;
				});
			},

			toAuth() {
				if(!this.type){
					return this.$util.msg('请先选择认证类型');
				}
				
				this.$util.toUrl(`/pages/circle/create?type=${this.type}`, 'redirectTo')
			},
		},

		onLoad(option) {
			if (option.token) {
				uni.setStorageSync('token', option.token);
				uni.setStorageSync('cid', option.cid);
				uni.setStorageSync('terminal', option.terminal);
			}

			this.getStatus();
			this.getCompanyAuth();
		},
		
	}
</script>

<style lang="less" scoped>
	.nav_bar {
		background-size: 100% !important;
	}

	.page {
		min-height: 100vh;
		background: #FFF;
		padding: calc(44px + 64rpx + var(--paging-head-top)) 40rpx 30rpx;
	}

	.content {
		.list {
			height: 160rpx;
			background: linear-gradient(180deg, #FFF1F5 0%, #FFFFFF 100%);
			border-radius: 24rpx;
			border: 4rpx solid #FFEAEE;
			padding: 0 56rpx 0 32rpx;
			margin-bottom: 24rpx;

			.left {
				overflow: hidden;
				flex: 1;

				.icon {
					width: 64rpx;
					height: 64rpx;
					margin-right: 16rpx;

					image {
						width: 64rpx;
						height: 64rpx;
					}
				}

				.text {
					flex: 1;
					overflow: hidden;

					text {
						font-weight: 500;
						font-size: 32rpx;
						color: #192031;
						line-height: 44rpx;
					}

					view {
						font-size: 24rpx;
						color: #999999;
						line-height: 34rpx;
						margin-top: 6rpx;
					}
				}
			}

			.right {
				text {
					font-weight: 500;
					font-size: 24rpx;
					color: #666666;
					margin-left: 8rpx;
				}

				view {
					font-weight: 500;
					font-size: 24rpx;
					color: #FD2A53;
				}
			}
		}

		#select {
			border: 4rpx solid #FD2A53;
		}

	}

	.btn {
		width: 560rpx;
		height: 100rpx;
		background: #FD2A53;
		border-radius: 50rpx;
		border: 2rpx solid #FD2A53;
		font-weight: 500;
		font-size: 32rpx;
		color: #FFFFFF;
		position: fixed;
		bottom: 30rpx;
		left: 96rpx;
	}
	
	.modal {
		width: 616rpx;
		background: #FFFFFF;
		border-radius: 40rpx;
		padding: 104rpx 44rpx 44rpx;
	
		.text {
			font-size: 28rpx;
			color: #666666;
			line-height: 40rpx;
			text-align: center;
		}
	
		.modal_btn {
			margin-top: 42rpx;
	
			.item {
				width: 248rpx;
				height: 88rpx;
				border-radius: 44rpx;
	
				text {
					font-size: 28rpx;
					line-height: 40rpx;
				}
			}
	
			.cancel {
				background: #F1F1F1;
	
				text {
					color: #333333;
				}
			}
	
			.submit {
				background: #FD2A53;
	
				text {
					color: #FFF;
				}
			}
		}
	
		.icon {
			position: absolute;
			top: -50rpx;
			left: 50%;
			transform: translateX(-50%);
			background: #FFF;
			border-radius: 50%;
		}
	
	}

	.notice {
		height: 64rpx;
		background: #FFEAEE;
		border-radius: 16rpx;
		margin-bottom: 36rpx;
		padding: 0 24rpx;
		text {
			font-size: 24rpx;
			color: #FD2A53;
			line-height: 34rpx;
			margin-left: 8rpx;
		}
	}

</style>